<template>
    <view class="zh-wrapper">
        <scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
            <view class="wrapper">
                <view class="menu" :id="`menu-${item.id}`" :class="{ 'current': item.id == curCateId }"
                    v-for="(item, index) in goods" :key="index" @tap="handleMenuTap(item.id)">
                    <text>{{ item.name }}</text>
                </view>
            </view>
        </scroll-view>
        <scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop"
            @scroll="handleGoodsScroll">
            <view class="wrapper">
                <view class="list">
                    <view class="category" v-for="(item, index) in goodsCa.length > 0 ? goodsCa : goods" :key="index" :id="`cate-${item.id}`">
                        <slot name="goods" :data="item">
                            <view class="title">
                                <text>{{ item.name }}</text>
                                <image :src="item.icon" class="icon"></image>
                            </view>
                            <view class="items">
                                <view class="good" v-for="(good, key) in item.goods_list" :key="key"  @click.stop="goGoodInfo(good.id)">
                                    <image :src="good.images" class="image"></image>
                                    <view class="right">
                                        <text class="name">{{ good.name }}</text>
                                        <text class="tips">{{ good.content }}</text>
                                    </view>
                                </view>
                            </view>
                        </slot>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
    import { ref, nextTick, getCurrentInstance, watch } from "vue";
    import type {ICateItem}  from './goods.model';

    const props = defineProps<{
        scrollList : ICateItem[]
    }>()
    const instance = getCurrentInstance();
    const menuScrollIntoView = ref("");
    const curCateId = ref(6905);
    const cateScrollTop = ref(0);
    // 计算高度状态
    const sizeCalcState = ref(false);
    const goods = ref<ICateItem[]>([]);
	const goodsCa = ref<ICateItem[]>([]);
	
	const goGoodInfo=(id)=>{
		uni.navigateTo({
			url:'/pages/goods/detail?id='+id
		})
	}

    watch(
        () => props.scrollList,
        newVal => {
            goods.value = newVal;
			if(curCateId.value){
				goodsCa.value = goods.value.filter(function(item){
					return item.id == curCateId.value
				});
			}
            nextTick(() => {
                if (newVal && newVal.length > 0) {
                    calcSize();
                }
            })
        },
        {
            immediate: true,
            deep: true
        },
    )

    // 点击左侧菜单
    function handleMenuTap(id : number) {
		if (!sizeCalcState.value) {
            calcSize()
        }
        curCateId.value = id
        nextTick(() => {
            cateScrollTop.value = goods.value.find(item => item.id == id)?.top as number;
        })
		goodsCa.value = goods.value.filter(function(item){
			return item.id == curCateId.value
		});
    }

    // 
    function handleGoodsScroll({ detail }) {
        if (!sizeCalcState.value) {
            calcSize()
        }
        const { scrollTop } = detail

        const chickItem = goods.value.filter(item => item.id == curCateId.value)[0]
        // 如果当前选择的top > scrollTop , 不切换
        // 否则再进行切换
        if (chickItem?.top < scrollTop) {
            // 此处scrollTop + 1为了处理scrolltop的偏差值
            let tabs = goods.value.filter(item => item.top <= (scrollTop + 1))
            if (tabs.length > 0) {
                curCateId.value = tabs[tabs.length - 1].id
            }
        }
    }

    function calcSize() {
        let h = 10
        goods.value.forEach(item => {
            let view = uni.createSelectorQuery().in(instance).select(`#cate-${item.id}`)
            view.fields({
                size: true
            }, (data : any) => {
                item.top = h
                h += data.height
                item.bottom = h
            }).exec()
        })
        sizeCalcState.value = true
    }
</script>

<style lang="scss">
    $text-color-assist: #919293; // 辅助色
    $text-color-base: #5A5B5C; // 基础色

    page {
        height: 100%;
    }

    .zh-wrapper {
        height: 100%;
        overflow: hidden;
        width: 100%;
        display: flex;

        .menus {
            width: 200rpx;
            height: 100%;
            overflow: hidden;
            background-color: $uni-bg-color-grey;

            .wrapper {
                width: 100%;
                height: 100%;

                .menu {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding: 30rpx 20rpx;
                    font-size: 26rpx;
                    color: $text-color-assist;
                    position: relative;

                    &:nth-last-child(1) {
                        margin-bottom: 130rpx;
                    }

                    &.current {
                        background-color: skyblue;
                        color: $text-color-base;
                    }

                    .dot {
                        position: absolute;
                        width: 34rpx;
                        height: 34rpx;
                        line-height: 34rpx;
                        font-size: 22rpx;
                        background-color: $uni-color-primary;
                        color: #ffffff;
                        top: 16rpx;
                        right: 10rpx;
                        border-radius: 100%;
                        text-align: center;
                    }
                }
            }
        }

        .goods {
            flex: 1;
            height: 100%;
            overflow: hidden;
            background-color: #ffffff;

            .wrapper {
                width: 100%;
                height: 100%;
                padding: 20rpx;

                .list {
                    width: 100%;
                    font-size: $uni-font-size-base;
                    padding-bottom: 130rpx;

                    :deep(.category) {
                        width: 100%;

                        .title {
                            padding: 30rpx 0;
                            display: flex;
                            align-items: center;
                            color: $text-color-base;
						

                            .icon {
                                width: 38rpx;
                                height: 38rpx;
                                margin-left: 10rpx;
                            }
                        }
                    }

                    :deep(.items) {
                        display: flex;
                        flex-direction: column;
                        padding-bottom: -30rpx;

                        .good {
                            display: flex;
                            align-items: center;
                            margin-bottom: 30rpx;

                            .image {
                                width: 160rpx;
                                height: 160rpx;
                                margin-right: 20rpx;
                                border-radius: 8rpx;
                            }

                            .right {
                                flex: 1;
                                height: 160rpx;
                                overflow: hidden;
                                display: flex;
                                flex-direction: column;
                                align-items: flex-start;
                                justify-content: space-between;
                                padding-right: 14rpx;

                                .name {
                                    font-size: $uni-font-size-base;
                                    margin-bottom: 10rpx;
                                }

                                .tips {
                                    width: 100%;
                                    height: 40rpx;
                                    line-height: 40rpx;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    font-size: $uni-font-size-sm;
                                    color: $text-color-assist;
                                    margin-bottom: 10rpx;
                                }

                                .price_and_action {
                                    width: 100%;
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;

                                    .price {
                                        font-size: $uni-font-size-base;
                                        font-weight: 600;
                                    }

                                    .btn-group {
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                        position: relative;

                                        .btn {
                                            padding: 0 20rpx;
                                            box-sizing: border-box;
                                            font-size: $uni-font-size-sm;
                                            height: 44rpx;
                                            line-height: 44rpx;

                                            &.property_btn {
                                                border-radius: 24rpx;
                                            }

                                            &.add_btn,
                                            &.reduce_btn {
                                                padding: 0;
                                                width: 44rpx;
                                                border-radius: 44rpx;
                                            }
                                        }

                                        .dot {
                                            position: absolute;
                                            background-color: #ffffff;
                                            border: 1px solid $uni-color-primary;
                                            color: $uni-color-primary;
                                            font-size: $uni-font-size-sm;
                                            width: 36rpx;
                                            height: 36rpx;
                                            line-height: 36rpx;
                                            text-align: center;
                                            border-radius: 100%;
                                            right: -12rpx;
                                            top: -10rpx;
                                        }

                                        .number {
                                            width: 44rpx;
                                            height: 44rpx;
                                            line-height: 44rpx;
                                            text-align: center;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>